<template>
    <!--key 如果没有设定 是固定在当前选中得dom标签上
        如果说设定了key 则跟随dom得变化而变化
    -->
    <div class="header" v-for="(item,index) in brand" :key="item.id">
        <input type="checkbox">
        <text class="title">{{ item.name }}</text>
         <text class="title">{{ item.price }}</text>
         <button class="btn" @click="remove(index)">删除</button>
    </div>
    <p>{{ num }}</p>




</template>
<script setup>
import { computed, ref } from 'vue';

const brand = ref([
    { id: '101', name: '奔驰', price: '16.8' },
    { id: '102', name: '宝马', price: '18.8' },
    { id: '103', name: '奥迪', price: '14.68' },
    { id: '104', name: '小米', price: '21.68' },
    { id: '105', name: 'BYD', price: '6.99' }
])

const remove = (index) => { 
    console.log(index);
    brand.value.splice(index,1)
}

const a = 10
const b = 20

const num = computed (()=> { 
return a+b
})

</script>
<style scoped>
.header{
    padding-left:10px ;
    padding-right: 10px;
    border-bottom: 1px solid rgb(205, 203, 203);
}
.title{
    padding-left: 15px;
 
}
.btn{
    margin-left: 15px;
    color: red;
}
</style>